<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Measure_area_Service</title>
    <script src="../../dist/openlayers/include-openlayers.js"></script>
</head>

<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%; position: absolute;top: 0;"> 
    <div id="map" style="width: 100%;height:100%"></div>
    <script type="text/javascript">
        var map, interaction, vectorLayer, feature,
            url = 'http://localhost:8090/iserver/services/map-Dubai/rest/maps/Dubai';
        map = new ol.Map({
            target: 'map',
            view: new ol.View({
                center: [55.23, 25.08], // 中心点
                zoom: 12, // 缩放级别
                projection: "EPSG:4326"
            }),
            controls: ol.control.defaults({
                attributionOptions: {
                    collapsed: true
                }
            }),
            layers: [
                // 创建一个使用Open Street Map地图源的瓦片图层
                new ol.layer.Tile({ source: new ol.source.OSM() })
            ],
        });
        var layer = new ol.layer.Tile({
            source: new ol.source.TileSuperMapRest({
                url: url,
                tileLoadFunction: function (tile, src) {
                    var xhr = new XMLHttpRequest();
                    xhr.responseType = 'blob';
                    xhr.addEventListener('loadend', function (evt) {
                        var data = this.response;
                        if (data !== undefined) {
                            tile.getImage().src = URL.createObjectURL(data);
                        } else {
                            tile.setState('error');
                        }
                    });
                    xhr.addEventListener('error', function () {
                        tile.setState('error');
                    });
                    xhr.open('GET', src);
                    xhr.setRequestHeader('Accept', '*/*');
                    xhr.setRequestHeader('X-HW-ID', "userid");
                    xhr.setRequestHeader('X-HW-APPKEY', "username");
                    xhr.send();
                }
            }),
            projection: 'EPSG:4326'
        });
        map.addLayer(layer);
        var source = new ol.source.Vector({ wrapX: false });
        vectorLayer = new ol.layer.Vector({
            source: source
        });
        map.addLayer(vectorLayer);
        interaction = new ol.interaction.Draw({
            source: source,
            type: "Polygon",
        });
        interaction.on('drawstart', function (evt) {
            feature = evt.feature;
        });
        interaction.on('drawend', function () {
            var areaMeasureParam = new SuperMap.MeasureParameters(feature.getGeometry());
            new ol.supermap.MeasureService(url, {
                headers: {
                    "X-HW-ID": "userid",
                    "X-HW-APPKEY": "username"
                }
            }).measureArea(areaMeasureParam, function (serviceResult) {
                // widgets.alert.showAlert(serviceResult.result.area + resources.msg_sqm, true);
            });
        });

        map.addInteraction(interaction);

    </script>
</body>

</html>